<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>划拳小游戏</title>
		<style type="text/css">
			.computer{height: 100px;}
			div{margin-top: 20px;border: 1px solid #ddd;}
			.stone,.scissors,.cloth{height: 50px;line-height: 50px;text-align: center;cursor: pointer;}
			.result{height: 100px;}
		</style>
	</head>
	<body>
		<div id="computer" class="computer"></div>
		<div id="stone" class="stone" data-number="0">石头</div>
		<div id="scissors" class="scissors" data-number="1">剪刀</div>
		<div id="cloth" class="cloth" data-number="2">布</div>
		<div id="result" class="result">结果</div>
		<script type="text/javascript">
			// 第一步：界面 [已完成]
			// 第二步：获取元素 [已完成]
			// 第三步：电脑出拳 随机出拳 Math.random() 数学对象的随机函数 生成的值 [0,1) 0-1之间的值，包括0，不包括1
			// 第四步：自己选择出拳
			// 第五步：比出拳大小

			var computer = document.getElementById('computer');
			var stone 	 = document.getElementById('stone');
			var scissors = document.getElementById('scissors');
			var cloth    = document.getElementById('cloth');
			var result   = document.getElementById('result');

			console.log('---stone---');
			console.dir(stone);

			//var type = ['石头','剪刀','布']; 电脑
			//var self = ['石头','剪刀','布']; 自己

			/*
			自己 - 电脑 =  0 平手 
			自己 - 电脑 = -1 赢了
			自己 - 电脑 = -2 输了
			自己 - 电脑 =  1 输了
			自己 - 电脑 = -1 赢了
			自己 - 电脑 =  2 赢了
			自己 - 电脑 =  1 输了

			0     平手
			-1，2 赢了
			1，-2 输了
			*/

			var randomNum = Math.floor(Math.random() * 3);
			// Math.floor() 向下取整 Math.floor(2.5) == 2
			// Math.random() 0.2317177222 
			//console.log(type[randomNum]);
			var computerResult = ['石头','剪刀','布'][randomNum];
			var _self = ['石头','剪刀','布'];
			console.log(computerResult);
			function restartRandom(){ // 重启随机数
				randomNum = Math.floor(Math.random() * 3);
				computerResult = ['石头','剪刀','布'][randomNum];
				console.log(computerResult);
			}

			stone.onclick = function(){
				var number = stone.dataset.number; // 通过data自定义的number属性
				var _selfType = _self[number];
				if(number - randomNum == 0){
					result.innerText = '平手 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == -1 || number - randomNum == 2){
					result.innerText = '赢了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == 1 || number - randomNum == -2){
					result.innerText = '输了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				restartRandom();
			}

			scissors.onclick = function(){
				var number = stone.dataset.number; // 通过data自定义的number属性
				var _selfType = _self[number];
				if(number - randomNum == 0){
					result.innerText = '平手 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == -1 || number - randomNum == 2){
					result.innerText = '赢了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == 1 || number - randomNum == -2){
					result.innerText = '输了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				restartRandom();
			}

			cloth.onclick = function(){
				var number = stone.dataset.number; // 通过data自定义的number属性
				var _selfType = _self[number];
				if(number - randomNum == 0){
					result.innerText = '平手 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == -1 || number - randomNum == 2){
					result.innerText = '赢了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				if(number - randomNum == 1 || number - randomNum == -2){
					result.innerText = '输了 我出的是：'+ _selfType;
					computer.innerText = '电脑出的是：' + computerResult;
				}
				restartRandom();
			}
		</script>
	</body>
</html>